<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8" />
		<title>蓝莲花酒店官网 </title>
		<link rel="shortcut icon" th:href="@{/image/hotel.ico}" type="image/x-icon" />
		<link rel="stylesheet" type="text/css" th:href="@{/layui/css/layui.css}"/>
		<link rel="stylesheet" type="text/css" th:href="@{/layui/css/view.css}"/>
	</head>
	<style type="text/css">
		#container {
			width: 100%;
			height: 100%;
			float: left;
			position: relative;
		}
	</style>
	<body>
		<!--导航栏-->
		<div th:include="common/header :: html"></div>
		<!--<div  id="container"></div>-->

		<div class="layui-content">
			<div class="layui-row">
				<div class="layui-card">
					<div class="layui-card-header">酒店 - <span th:text="${hotel.id != null ? '编辑' : '新增'}"></span></div>
					<form class="layui-form layui-card-body" action="#" th:action="@{/hotel/save}" method="post">
						<input type="hidden" name="id" th:value="${hotel.id}">
						<input type="hidden" id="img" name="img" th:value="${hotel.id eq null ? 'hotel-1.png' : hotel.img}">
						<div class="layui-form-item">
							<label class="layui-form-label">酒店名称</label>
							<div class="layui-input-block">
								<input type="text" name="name" required th:value="${hotel.name}" lay-verify="required"
									   placeholder="酒店名称" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">酒店图片</label>
							<div class="layui-input-block">
								<img id="hotel-img" th:src="@{${hotel.id eq null ? '/image/hotel/hotel-1.png' : '/image/hotel/' + hotel.img}}">
							</div>
							<div class="layui-input-block" style="margin-top: 5px;">
								<a href="javascript:void(0);" class="layui-btn layui-btn-sm" th:onclick="changeOne()">换一张</a>
							</div>
						</div>
						<div class="layui-form-item" id="dt">
							<label class="layui-form-label">选取酒店地址</label>
							<div class="layui-input-block">
								<span class="input-item-text">经纬度</span>
								<input readonly id='lnglat' type="text" th:value="${hotel.longitude + ',' + hotel.latitude}" value='116.39,39.9' name="coordinate" style="width: 384px;">

								<span class="input-item-text">地址</span>
								<input readonly id='address' type="text" name="detailAddress" th:value="${hotel.detailAddress}" style="width: 60%;">
							</div>
							<div class="layui-input-block">
								<div style="width:100%;height:400px;border:#ccc solid 1px;" id="container"></div>
							</div>
						</div>
						<div class="layui-form-item">
							<div class="layui-input-block">
								<button class="layui-btn layui-btn-blue" lay-submit lay-filter="formDemo">保存</button>
								<button type="reset" class="layui-btn layui-btn-primary">重置</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.10&key=ccc557b111dd155750089e029fe3126e&plugin=AMap.Geocoder"></script>
	<script type="text/javascript" th:src="@{/header/js/jquery-1.8.2.min.js}"></script>
	<script th:inline="javascript">
        /*<![CDATA[*/
        var contextPath = [[${#request.getContextPath()}]]; //获取当前应用路径
        /*]]>*/
	</script>
	<script type="text/javascript">
        var map = new AMap.Map("container", {
            resizeEnable: true
        });

        var geocoder,marker;
        function regeoCode() {
            if(!geocoder){
                geocoder = new AMap.Geocoder({
                    city: "010", //城市设为北京，默认：“全国”
                    radius: 1000 //范围，默认：500
                });
            }
            var lnglat  = document.getElementById('lnglat').value.split(',');
            if(!marker){
                marker = new AMap.Marker();
                map.add(marker);
            }
            marker.setPosition(lnglat);

            geocoder.getAddress(lnglat, function(status, result) {
                if (status === 'complete'&&result.regeocode) {
                    var address = result.regeocode.formattedAddress;
                    document.getElementById('address').value = address;
                }else{alert(JSON.stringify(result))}
            });
        }

        map.on('click',function(e){
            document.getElementById('lnglat').value = e.lnglat;
            regeoCode();
        })

		//更换图片
		function changeOne() {
            //随机1-5
			var index = Math.floor(Math.random()*5+1);
			//页面显示
			$("#hotel-img").attr("src",contextPath + "/image/hotel/hotel-" + index + ".png");
			//保存属性
			$("#img").val("hotel-" + index + ".png");
        }
	</script>
</html>